<template>
  <div>
    <div class="tableHeader">
      <div class="tableHeaderTitle">底部菜单列表</div>
      <div class="tableHeaderMenu">
        <el-button-group>
          <el-button icon="el-icon-arrow-left" @click="goBackNode" size="mini"></el-button>
          <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
        </el-button-group>
      </div>
    </div>

    <el-table ref="multipleTable" :data="nodeData" tooltip-effect="dark" style="width: 100%">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="cbm_name" label="菜单名称"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="cbm_url" label="菜单链接URL"></el-table-column>
      <el-table-column label="操作" fixed="right" width="260">
        <template slot-scope="scope">
            <el-button size="mini" @click="getNodeData(scope.row.cbm_id)">查看子节点</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  //数据源
  data() {
    return {
        lastFid: 0,
        nodeDataArr : []
    };
  },
  //初始化函数
  mounted() {
    this.initData();
  },
  //计算属性
  computed: {
    ...mapState({
      bottomMenuData  : state => state.BottomMenuListModule.bottomMenuData
    }),
    nodeData() {
      return this.nodeDataArr;
    }
  },
  //组件方法
  methods: {
    initData() {
      this.$myLoading.startLoading();
      this.$http.getHttp(
        this.$API.searchBottomMenu + "/skip/0/limit/1000/cbm_is_delete/0",
        rs => {
          this.$myLoading.endLoading();
          this.$store.commit("BottomMenuListModule/updateBottomMenuData", rs.data);
          this.getNodeData(0, 0);
        }
      );
    },
    goBackNode() {
      if (this.lastFid == -1) {
        this.$myPop.WarningMessage("该菜单已经是顶级菜单了，无法继续返回");
        return;
      }
      this.getNodeData(this.lastFid);
    },
    getNodeData(fid) {
      
      if (fid == 0) {
        this.lastFid = -1;
      } else {
        //根据当前节点查询父节点ID
        this.bottomMenuData.forEach(item => {
          if (item.cbm_id == fid) {
            this.lastFid = item.cbm_fid;
            return;
          }
        });
      }

      //筛选满足条件的节点信息
      this.nodeDataArr = this.bottomMenuData.filter(item => {
        return item.cbm_fid == fid;
      });
    },
    refreshData() {
      this.initData();
    },
    handleEdit(index, item) {
      this.$router.push({
        path: "/editBottomMenu",
        query: {
          cbm_id: item.cbm_id
        }
      });
    },
    handleDelete(index, item) {

      var params = {
        cbm_id: item.cbm_id
      };

      this.$myPop.confirmBox("确认操作", "确定要删除该菜单吗？", () => {
        this.$myLoading.startLoading();
        this.$http.postHttp(this.$API.bottomMenuDelete, params, rs => {
          this.$myLoading.endLoading();
          this.$myPop.SuccessMessage();
          this.initData();
        });
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>